<template>
  <div class="salesCompar">
    <div class="title">
      <stitle :bg="bg" text="销售数据对比" :type="0" />
    </div>
    <div class="content">
      <div class="con-item" v-for="(item, index) in list" :key="index">
        <i :class="`${item.isUp ? 'up' : 'down'} ${index ? 'right' : ''}`"></i>
        <span class="value">
          <te-flop
            :number="item.value"
            :animationTime="1"
            :intervalTime="10000"
            :flop-class="`flop${index}`"
          ></te-flop> </span
        ><font>%</font>
        <span class="name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
export default {
  name: "salesCompar",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      list: [
        {
          name: "去年同比",
          value: 85,
          isUp: true,
        },
        {
          name: "上月环比",
          value: 15,
          isUp: false,
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.salesCompar {
  width: 500px;
  float: left;
  padding-left: 60px;
  box-sizing: border-box;
  .title {
    width: 400px;
  }
  .content {
    width: 408px;
    height: 165px;
    margin: 40px auto;
    background-image: url("~@/assets/images/salesData/salesCompar.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .con-item {
      float: left;
      margin-left: 25px;
      i {
        display: inline-block;
        width: 10px;
        height: 25px;

        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .up {
        background-image: url("~@/assets/images/salesData/up.png");
      }
      .down {
        background-image: url("~@/assets/images/salesData/down.png");
      }
      .right {
        float: right;
        margin-top: 60px;
        margin-left: 10px;
      }
      .value {
        display: inline-block;
        color: #c0d8f0;
        font-family: HYLXTJ;
        padding-right: 5px;
        margin-top: 50px;
        margin-bottom: 20px;
      }
      .name {
        display: block;
        text-align: center;
      }
      font {
        float: right;
        margin-top: 67px;
      }
    }
    .con-item:nth-child(2) {
      float: right;
      margin-right: 10px;
      .value {
        margin-left: 20px;
      }
    }
    .te-flop /deep/ li {
      width: 14px;
    }
    .te-flop /deep/ .te-dataBoc--item span {
      font-size: 23px;
      font-weight: normal;
    }
  }
}
</style>
